<template>
  <div class="hello">
    <div>
      <h1>出库一览</h1>
    </div>
    <div id="demo2" class="divF">
      <div id="showData1">
        <div style="width: 100%">
          <div id="backDiv" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-xxs-12" style="float: right">
            <button type="submit" class="btn btn-default" @click="back">返回主画面</button>
          </div>
        </div>
        <table class="table table-striped table-hover table-bordered dataTable" id="outboundTable">
          <thead>
          <tr>
            <th>仓库名称</th>
            <th>出库单号</th>
            <th>出库类别</th>
            <th>出库人</th>
            <th>出库时间</th>
            <th>出库状态</th>
            <th>备考</th>
            </tr>
          </thead>
          <tbody @click="clickTr">
          </tbody>
          </table>
      </div>
      <div id="showData2" class="hide">
        <div class="space20"></div>
        <div id="backDiv2" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-xxs-12" style="float: right;margin-bottom: 1cm!important;">
          <button id="back2" type="submit" class="btn btn-default" @click="back2">返回</button>
          <button id="outbound" type="submit" class="btn btn-primary" @click="outbound">出库</button>
        </div>
        <br><br>
        <div class="tab-content" id="dataShow2">
          <form class="form-horizontal" role="form" method="POST">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-xxs-12" style="float: left !important;">
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0002001">仓库编号：</label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0002001"
                         id="t0002001" disabled="disabled"/>
                </div>
              </div>
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0002002">出库单号：</label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0002002"
                         id="t0002002" disabled="disabled"/>
                </div>
              </div>
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0002004">物品名称：</label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0002004"
                         id="t0002004" disabled="disabled"/>
                </div>
              </div>
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0002005">物品数量：</label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0002005"
                         id="t0002005" disabled="disabled"/>
                </div>
              </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 col-xxs-12" style="float: left !important;">
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0002006">存放大小：</label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0002006"
                         id="t0002006" disabled="disabled"/>
                </div>
              </div>
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0002007">存放位置：<i style="color: red">*</i></label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0002007"
                         id="t0002007" disabled="disabled"/>
                </div>
              </div>
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0001004">出库人：</label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0001004"
                         id="t0001004" disabled="disabled"/>
                </div>
              </div>
              <div class="form-group form-group-sm">
                <label class="control-label" for="t0001007">备考：</label>
                <div class="controls">
                  <input class="m-wrap span12 normal-input-lg" type="text" name="t0001007"
                         id="t0001007" disabled="disabled"/>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  data () {
    return {
    }
  },
  mounted: function () {
    $.ajax({
      type: 'POST',
      url: 'http://localhost:3000/outboundFirst',
      headers: {
        'Conten-Type': 'http://localhost:3000/outboundFirst'
      },
      success: function (backDate) {
        // body...
        // console.log(backDate)
        $.each(backDate, function (n, value) {
          var col1 = $('<td>' + value.t0001001 + '</td>')
          var col2 = $('<td>' + value.t0001002 + '</td>')
          var col3 = $('<td>' + value.t0001003 + '</td>')
          var col5 = $('<td>' + value.t0001005 + '</td>')
          var col6 = $('<td>' + value.t0001006 + '</td>')
          var col7 = $('<td>' + value.t0001007 + '</td>')
          var col4 = $('<td>' + value.t0001004 + '</td>')
          var row = $('<tr></tr>')
          row = row.append(col1, col2, col3, col4, col5, col6, col7)
          row.appendTo($('#outboundTable'))
        })
      }
    })
  },
  methods: {
    back: function () {
      this.$router.push({path: '/login'})
    },
    back2: function () {
      $('#outbound').removeClass('hide')
      $('#showData2').addClass('hide')
      $('#showData1').removeClass('hide')
    },
    clickTr: function (event) {
      $('#showData1').addClass('hide')
      $('#showData2').removeClass('hide')
      var param = event.srcElement.parentElement.children.item(1).textContent
      $.ajax({
        type: 'POST',
        url: 'http://localhost:3000/outselectDetail',
        headers: {
          'Conten-Type': 'http://localhost:3000/outselectDetail'
        },
        data: {'param': param},
        success: function (backDate) {
          $.each(backDate, function (n, value) {
            $('#t0002001').val(value.t0002001)
            $('#t0002002').val(value.t0002002)
            $('#t0002004').val(value.t0002004)
            $('#t0002005').val(value.t0002005)
            $('#t0002006').val(value.t0002006)
            $('#t0002007').val(value.t0002007)
            $('#t0001004').val(value.t0001004)
            $('#t0001007').val(value.t0001007)
            if (value.t0001006 === '0504') {
              $('#outbound').addClass('hide')
            }
          })
        }
      })
    },
    outbound: function () {
      var t0002002 = $('#t0002002').val()
      $.ajax({
        type: 'POST',
        url: 'http://localhost:3000/outupdateInsert',
        headers: {
          'Conten-Type': 'http://localhost:3000/outupdateInsert'
        },
        data: {'orderNum': t0002002},
        success: function (backDate) {
          $('#showData2').addClass('hide')
          $('#showData1').removeClass('hide')
          $.ajax({
            type: 'POST',
            url: 'http://localhost:3000/outboundFirst',
            headers: {
              'Conten-Type': 'http://localhost:3000/outboundFirst'
            },
            success: function (backDate) {
              $('#outboundTable tbody').empty()
              // body...
              // console.log(backDate)
              $.each(backDate, function (n, value) {
                var col1 = $('<td>' + value.t0001001 + '</td>')
                var col2 = $('<td>' + value.t0001002 + '</td>')
                var col3 = $('<td>' + value.t0001003 + '</td>')
                var col4 = $('<td>' + value.t0001004 + '</td>')
                var col5 = $('<td>' + value.t0001005 + '</td>')
                var col6 = $('<td>' + value.t0001006 + '</td>')
                var col7 = $('<td>' + value.t0001007 + '</td>')
                var row = $('<tr></tr>')
                row = row.append(col1, col2, col3, col4, col5, col6, col7)
                row.appendTo($('#outboundTable'))
              })
            }
          })
          alert('出库完成。')
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #search {
    margin-bottom: 10px;
  }
  .divF{
    vertical-align: middle;
    position: absolute !important;
    width: 100%;
  }
  .hide {
     display: none;
  }
</style>
